<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="brand-info">
          <!-- <h2 class="brand-info__text">E智人力</h2> -->
          <svg
            width="800"
            height="800"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
          >
            <g>
              <path
                d="m335.5,180.953125c1,0 9.912811,2.754517 24,4c28.90448,2.555511 40.138611,-1.138702 72,2c12.106934,1.192673 14.149353,1.474274 15,2c1.9021,1.175568 -0.795013,4.371704 -6,7c-11.604462,5.859756 -28.096436,10.798233 -45,19c-14.082336,6.83287 -37.083862,16.807968 -51,23c-13.081329,5.820587 -21.504242,10.035522 -26,13c-2.361298,1.557022 -3,3 -3,5c0,1 -0.160187,3.012909 0,4c0.506531,3.121429 5.934784,5.322388 20,8c17.926331,3.412689 41.770691,8.994171 68,11c23.930115,1.830017 41.973236,0.499695 56,1c3.997467,0.142578 5.292908,0.707092 6,0c0.707092,-0.707092 -2.228851,-3.729614 -7,-8c-7.376404,-6.602173 -16.760162,-13.355774 -27,-20c-9.782959,-6.347748 -19.079193,-10.93895 -26,-20c-6.069946,-7.947067 -11.385284,-15.771729 -16,-24c-2.187592,-3.900574 -5.541229,-8.518707 -10,-12c-4.595978,-3.58844 -8.823761,-4.486252 -11,-5c-1.946503,-0.459503 -3.224213,-0.097168 -4,2c-1.430481,3.867004 -5.662842,8.571075 -10,16c-8.345764,14.295044 -9.913544,21.033859 -17,39c-5.927826,15.028687 -12.414246,30.800415 -19,45c-6.40863,13.817719 -9.820374,25.766937 -12,35c-1.624603,6.881897 -2,13 -2,17c0,2 -0.525726,3.149353 0,4c1.175568,1.9021 9.949982,2.327637 22,4c17.938843,2.489624 42.14679,7.234528 91,17c37.120636,7.420197 67.772339,15.195282 91,19c17.87262,2.927551 27,3 28,3c1,0 1.770264,-0.026764 2,-1c0.513733,-2.176239 2.356201,-4.790955 4,-8c3.895264,-7.604401 8.340881,-20.852325 16,-39c16.751465,-39.691162 26.532898,-73.466248 41,-95c9.496704,-14.135498 18.443542,-22.38063 20,-28c0.533875,-1.927429 -0.707092,-3.292892 0,-4c0.707092,-0.707108 1.108887,4.038513 0,7c-4.558533,12.174561 -9.639343,26.134094 -15,40c-4.687744,12.125397 -7.972534,17.647491 -9,22c-0.229736,0.973236 0.413269,-0.488251 3,-3c6.768188,-6.572052 16.980469,-11.065857 27,-14c6.986694,-2.046021 11,-3 15,-3c1,0 2.292908,-0.707092 3,0c1.414185,1.414215 -1.039734,10.146698 -8,15c-11.744568,8.189331 -29.095276,11.797668 -42,18c-6.046143,2.905914 -11,2.585785 -11,4c0,1.414215 3,2 10,2c12,0 26,0 42,0c14,0 23,0 26,0c1,0 1.175598,-2.0979 0,-4c-2.628662,-4.253265 -7.80835,-8.231079 -15,-14c-3.900208,-3.128632 -7.692566,-6.186005 -9,-8c-0.826904,-1.147278 -1,1 -1,5c0,6 0.512451,13.130432 -1,18c-2.258911,7.273041 -5.288574,13.868286 -7,18c-1.210144,2.92157 -1.459534,3.946503 -1,2c0.513733,-2.176239 1.464478,-4.464478 5,-8c3.535522,-3.535522 7.434631,-4.84903 10,-3c4.056213,2.923553 3.692566,6.186005 5,8c0.826904,1.147278 2.839844,4.012909 3,5c0.506531,3.121429 2.292908,3.707092 3,3c0.707092,-0.707092 0,-5 0,-7c0,-3 0,-6 0,-12c0,-5 -0.307434,-8.186005 1,-10c0.826904,-1.147278 2,-1 2,0c0,1 0.569519,5.132996 2,9c0.775818,2.097168 1,3 1,0c0,-7 -2.162292,-15.675446 1,-22c1.264893,-2.529816 3,-2 4,-2c2,0 6.060791,-0.359283 13,1c4.046204,0.792603 6.611023,0.92807 9,3c1.68927,1.465088 2,6 2,9c0,4 0.535522,9.464478 -3,13c-3.535522,3.535522 -10.790283,5.990234 -18,7c-1.980652,0.277405 -0.984985,-0.244354 1,0c4.092224,0.503784 5.996582,0.917511 5,1c-12.124084,1.003418 -18.092285,2.711609 -31,7c-14.107849,4.687103 -28.032593,9.872528 -40,13c-11.031311,2.882843 -18,4 -21,7c-1,1 -0.167542,3.128448 6,11c8.765747,11.187561 15.428223,21.42334 20,27c0.896606,1.093658 1.909363,0.997955 2,-1c0.500488,-11.034027 2,-18 2,-24c0,-8 0,-13 0,-16c0,-1 -0.707092,-2.292908 0,-3c2.121338,-2.121307 11,1 24,1c11,0 20.059937,0.977478 28,0c4.092224,-0.503784 5,-1 6,-1c1,0 2.076111,0.61731 3,1c1.30658,0.541199 1,2 1,3c0,1 0.329895,3.013641 0,7c-0.501709,6.062042 -3,12 -5,18c-3,9 -5.284729,16.924835 -7,24c-1.201416,4.955475 -1.486267,7.823761 -2,10c-0.229736,0.973236 -0.076111,2.38269 -1,2c-2.613098,-1.082397 -6.837097,-11.116058 -14,-21c-5.868103,-8.09726 -10.769531,-13.390991 -13,-17c-1.662537,-2.690002 -3.458801,-4.693451 -4,-6c-0.765381,-1.847748 0,-3 0,-4c0,-1 1.038757,-1.48056 4,-1c3.12146,0.506531 8.925781,2.497559 14,3c0.995117,0.098541 1,1 1,2c0,7 -2.269531,12.425232 -11,16c-8.532043,3.4935 -17.026733,3.770233 -18,4c-2.17627,0.513733 -2,2 -2,3c0,1 -0.246887,3.332703 1,4c4.495667,2.406006 10,2 14,2c4,0 10,1 11,1l1,0"
                stroke="#fff"
                stroke-width="8"
                fill="none"
              ></path>
            </g>
          </svg>
          <p class="brand-info__intro">
            <!-- renren-fast-vue基于vue、element-ui构建开发，实现renren-fast后台管理前端功能，提供一套更优的前端解决方案。 -->
          </p>
        </div>
        <div class="login-main">
          <h3 class="login-title">用户登录</h3>
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            @keyup.enter.native="dataFormSubmit()"
            status-icon
          >
            <el-form-item prop="userName">
              <el-input
                v-model="dataForm.userName"
                placeholder="帐号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="dataForm.password"
                type="password"
                placeholder="密码"
              ></el-input>
            </el-form-item>
            <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" placeholder="验证码">
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()" alt="" />
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button
                class="login-btn-submit"
                type="primary"
                @click="dataFormSubmit()"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getUUID } from "@/utils";
export default {
  data() {
    return {
      dataForm: {
        userName: "",
        password: "",
        uuid: "",
        captcha: "",
      },
      dataRule: {
        userName: [
          { required: true, message: "帐号不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
        ],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      captchaPath: "",
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    // 提交表单
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl("/sys/login"),
            method: "post",
            data: this.$http.adornData({
              username: this.dataForm.userName,
              password: this.dataForm.password,
              uuid: this.dataForm.uuid,
              captcha: this.dataForm.captcha,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$cookie.set("token", data.token);
              this.getUserInfo();
            } else {
              this.getCaptcha();
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    getUserInfo() {
      this.$http({
        url: this.$http.adornUrl("/sys/user/info"),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.loading = false;
          this.userId = data.user.userId;
          this.userName = data.user.username;
          localStorage.setItem("authority", data.user.authority);
          localStorage.setItem("userId", this.userId);
          localStorage.setItem("departmentId", data.user.departmentId);
          if (data.user.authority != 1) {
            this.$router.replace({ name: "userPage" });
          } else {
            this.$router.replace({ name: "home" });
          }
        }
      });
    },
    // 获取验证码
    getCaptcha() {
      this.dataForm.uuid = getUUID();
      this.captchaPath = this.$http.adornUrl(
        `/captcha.jpg?uuid=${this.dataForm.uuid}`
      );
    },
  },
};
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/bj.png);
    background-size: 100% 100%;
  }
  svg {
    margin-left: -150px;
    // border: 1px solid #f00;
    path {
      stroke-dasharray: 2800;
      stroke-dashoffset: 2800;
      -webkit-animation: dash 5s linear infinite;
      animation: dash 6s linear infinite;
    }
    @-webkit-keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
    @keyframes dash {
      to {
        stroke-dashoffset: 0;
      }
    }
  }

  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  .brand-info {
    // margin: 220px 100px 0 90px;
    color: #fff;
  }
  .brand-info__text {
    position: absolute;
    top: 100px;
    left: 100px;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    animation: textMove 4s infinite;
  }
  @keyframes textMove {
    0% {
      top: 100px;
      left: 100px;
      font-size: 48px;
    }
    25% {
      top: 200px;
      left: 200px;
      font-size: 58px;
    }
    50% {
      top: 100px;
      left: 300px;
      font-size: 48px;
    }
    75% {
      top: 200px;
      left: 200px;
      font-size: 58px;
    }
    100% {
      top: 100px;
      left: 100px;
      font-size: 48px;
    }
  }
  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: 0.6;
  }
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}
</style>
